<template>
  <div class="dragResize-wrapper">
    <div class="dragResize-left">
      <div class="left-content">
        <div
          class="item"
          v-for="(item, index) in menuList"
          @click="scrollToSection(item)"
        >
          {{ item.name }}
        </div>
      </div>
      <div class="resize" ref="resizeRef" @mousedown="resize"></div>
    </div>
    <div class="dragResize-right">
      <div class="right-content" ref="mainRef" @scroll="handleScroll">
        <div class="item" v-for="(item, index) in menuList">
          <h1>{{ item.name }}</h1>
          <div class="box"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from "vue";
const menuList = ref([
  {
    name: "123",
    value: 1,
    ref:''
  },
  {
    name: "12312313",
    value: 2,
  },
  {
    name: "12warwer3",
    value: 3,
  },
  {
    name: "sdfsdf123",
    value: 4,
  },
  {
    name: "dfgdf123",
    value: 5,
  },
  {
    name: "12sdfdsg3",
    value: 6,
  },
  {
    name: "12fdgdfg3",
    value: 7,
  },
  {
    name: "cvbcvbcvb123",
    value: 8,
  },
]);
let scrollTimer = null; // 滚动到指定区域
const mainRef = ref(null);
const menuType = ref(1);
const isScrolling = ref(false);
const dragState = reactive({
  isDragging: false,
  startX: 0,
  leftInitialWidth: 0,
  minWidth: 300, // 左侧区域最小宽度限制
  maxWidth: 800, // 左侧区域最大宽度限制
});
const resizeRef = ref(null);
const resize = (e) => {
  dragState.isDragging = true;
  dragState.startX = e.clientX; // 获取鼠标按下时的X坐标
  dragState.leftInitialWidth = e.currentTarget.parentElement.offsetWidth; // 获取左侧区域初始宽度
  document.body.style.cursor = "e-resize"; // 设置鼠标样式为拖拽样式
  document.body.style.userSelect = "none"; // 禁止选中文本
};

// 鼠标移动事件，执行拖拽调整宽度
const handleMouseMove = (e) => {
  if (!dragState.isDragging) return; // 如果没有拖拽，直接返回
  const deltax = e.clientX - dragState.startX; // 计算鼠标移动的距离
  let newWidth = dragState.leftInitialWidth + deltax; // 计算新的宽度
  newWidth = Math.max(
    dragState.minWidth,
    Math.min(newWidth, dragState.maxWidth)
  ); // 限制宽度在最小和最大值之间
  document.querySelector(".dragResize-left").style.width = `${newWidth}px`; // 设置左侧区域的新宽度
  document.querySelector(
    ".dragResize-right"
  ).style.width = `calc(100% - ${newWidth}px)`; // 设置右侧区域宽度为剩余空间
};

// 鼠标松开事件，结束拖拽
const handleMouseUp = () => {
  if (dragState.isDragging) {
    dragState.isDragging = false; //重置拖拽状态
    document.body.style.cursor = "default"; // 恢复鼠标样式
    document.body.style.userSelect = "auto"; // 恢复文本选择
  }
};
const scrollToSection = (obj) => {
  console.log(obj,'objobj');
  
  menuType.value = obj.value;
  if (mainRef.value) {
    const targetElement = document.getElementById(obj.ref);
    menuType.value = obj.value;

    // 设置标志位，防止滚动事件干扰
    isScrolling.value = true;
    if (targetElement) {
      // 使用scrollIntoView方法滚动到目标元素
      targetElement.scrollIntoView({
        behavior: "smooth", // 平滑滚动
      });
      // 在平滑滚动结束后重置标志位
      if (scrollTimer) clearTimeout(scrollTimer);
      scrollTimer = setTimeout(() => {
        isScrolling.value = false;
      }, 1000); // 根据滚动时间调整延迟
    }
  }
};
// 处理滚动事件，根据滚动位置更新itType
const handleScroll = () => {
  // 如果是用户主动点击触发的滚动，则不处理
  if (isScrolling.value) return;
  if (!mainRef.value) return;

  // const scrollPosition = mainRef.value.scrollTop + 100; // 添加一些偏移量提高准确性

  // 查找当前可见的区域
  for (let i = menuList.value.length - 1; i >= 0; i--) {
    const section = document.getElementById(menuList.value[i].ref);

    if (section) {
      const rect = section.getBoundingClientRect();
      const mainRect = mainRef.value.getBoundingClientRect();
      // console.log(rect, mainRect, "mainRect");

      // 判断元素是否在可视区域内
      if (rect.top - mainRect.top <= 100) {
        // 100px的容差
        menuType.value = menuList.value[i].value;
        break;
      }
    }
  }
};
onMounted(() => {
  document.addEventListener("mousemove", handleMouseMove); // 监听鼠标移动事件
  document.addEventListener("mouseup", handleMouseUp); // 监听鼠标松开事件
});
</script>

<style lang="scss" scoped>
.dragResize-wrapper {
  display: flex;
  width: 100%;
  height: 100%;
  .dragResize-left {
    position: relative;
    width: 20%;
    height: 100%;
    background-color: #9ac0f8;
    border-right: 1px solid #ccc;
    .left-content {
      .item {
        width: 100%;
        height: 50px;
        text-align: center;
        line-height: 50px;
        background-color: #ccc;
        margin-bottom: 15px;
        cursor: pointer;
      }
    }
    .resize {
      position: absolute;
      right: 0;
      top: 0;
      width: 10px;
      height: 100%;
      background-color: #1a2029;
    }
    .resize:hover {
      cursor: e-resize;
    }
  }
  .dragResize-right {
    width: 80%;
    height: 100%;
    background-color: #e07a7a;
    .right-content {
      height: 100%;
      overflow-y: auto;
      .item {
        .box {
          width: 100px;
          height: 300px;
          background-color: #ccc;
        }
      }
    }
  }
}
</style>
